<script setup lang="ts">
import { ref, computed } from "vue";
import { Picker, Popup, DatePicker, Form, Button } from "vant";
import BasicForm from "./basicForm.vue";
import ExtendForm from "./extendForm.vue";
import MaterialForm from "./materialForm.vue";
// import ChooseUser from "@/components/OrganizationCascader/index.vue";
// import type { OptionType } from "@/components/OrganizationCascader/types";
import type { OrderForm, DictList, SelectList } from "../types";

const props = withDefaults(
	defineProps<{
		form: OrderForm;
	}>(),
	{}
);

const emits = defineEmits<{
	(e: "form-submit"): () => void;
}>();

const formRef = ref();
const popupState = ref(false);
// const chooseUserState = ref(false);
const currPopupType = ref(1);
let currCompany: DictList = {};
let currIndex: number = 0;
let currKey: string = "";
let selectList: SelectList = {
	companyList: [
		{
			text: "郑州恒达智控科技股份有限公司",
			value: "郑州恒达智控科技股份有限公司",
			childList: [
				{ text: "综采工作面分布式控制系统应用开发", value: "2024HD05" },
				{ text: "综采工作面-运输巷协同作业一体化智能控制系统开发", value: "2024HD04" },
				{ text: "支护运一体化装备智能控制系统研发及应用", value: "2024HD03" },
				{ text: "大倾角工作面智能化控制系统应用开发", value: "2024HD02" },
				{ text: "高可靠大流量乳化液泵站系统研发", value: "2023HD04" },
				{ text: "无人化工作面控制系统及关键部件研发", value: "2024HD06" },
				{ text: "综采工作面智能远程供液系统应用开发", value: "2023HD05" },
				{ text: "液压支架电液融合智能液压阀研发", value: "2024HD01" },
				{ text: "综采液压阀品质提升及工艺研究", value: "2023HD13" },
				{ text: "智能智造非标自动化技术研究", value: "2023HD11" },
				{ text: "综采控制系统产品性能和品质提升研究", value: "2024HD07" },
				{ text: "智能智造软件技术研究", value: "2023HD10" },
				{ text: "基于国产系统的支架电控系统研究与应用", value: "2023HD06" },
				{ text: "智能语音集控系统研究与产业化应用", value: "2023HD07" }
			]
		},
		{
			text: "智控网联科技(深圳)有限公司",
			value: "智控网联科技(深圳)有限公司",
			childList: [
				{ text: "高性能边缘计算模组及终端研发", value: "ZKSZ2401" },
				{ text: "井下高性能数据服务平台", value: "ZKSZ2301" }
			]
		},
		{
			text: "郑州煤机智控技术创新中心有限公司",
			value: "郑州煤机智控技术创新中心有限公司",
			childList: [
				{ text: "基于数字孪生的掘进集控系统", value: "ZZZK2301" },
				{ text: "井下单兵作业智能终端生态交互系统开发", value: "ZZZK2402" },
				{ text: "矿用智能机载控制系统的应用开发", value: "ZZZK2403" },
				{ text: "成套装备全寿命周期管理系统", value: "ZZZK2401" },
				{ text: "智能综掘管控平台", value: "ZZZK2303" },
				{ text: "支架姿态与顶板稳定性智能监测分析系统", value: "ZZZK2304" },
				{ text: "矿用特种作业机器人控制装置", value: "ZZZK2306" }
			]
		}
	],
	typeList: [
		{ text: "日常技术研发", value: "日常技术研发" },
		{ text: "样机或小批量试制", value: "样机或小批量试制" }
	],
	whetherList: [
		{ text: "是", value: "是" },
		{ text: "否", value: "否" }
	],
	tagList: [
		{ text: "已打tag", value: "已打tag" },
		{ text: "未打tag", value: "未打tag" }
	]
};
const currDictList = ref<DictList[]>(selectList.companyList);

const finalForm = computed(() => props.form);
const finalMaterialList = computed(() => finalForm.value.detailList);

const pickerConfirm = ({ selectedOptions }: any) => {
	const { text, value } = selectedOptions[0];
	if (currKey == "company") {
		currCompany = selectedOptions[0];
		if (finalForm.value.companyCode != value) {
			finalForm.value.projectCode = "";
			finalForm.value.projectName = "";
		}
		finalForm.value.companyCode = value;
		finalForm.value.companyName = text;
	} else if (currKey == "project") {
		finalForm.value.projectCode = value;
		finalForm.value.projectName = text;
	} else if (currKey == "whether") {
		finalForm.value.pcbFlag = value;
		finalForm.value.pcbFlagText = text;
	} else if (currKey == "type") {
		finalForm.value.applyType = value;
		finalForm.value.applyTypeText = text;
	} else if (currKey == "tp") {
		finalMaterialList.value[currIndex].patchFlag = value;
		finalMaterialList.value[currIndex].patchFlagText = text;
	} else if (currKey == "tag") {
		finalMaterialList.value[currIndex].tagFlag = value;
		finalMaterialList.value[currIndex].tagFlagText = text;
	}
	popupState.value = false;
};

const dateConfirm = ({ selectedValues }: any) => {
	const [hh, mm, ss] = selectedValues;
	finalForm.value.demandDate = hh + "-" + mm + "-" + ss;
	popupState.value = false;
};

const companyClick = () => {
	currPopupType.value = 1;
	currKey = "company";
	popupState.value = true;
	currDictList.value = selectList[currKey + "List"];
};

const projectClick = () => {
	currPopupType.value = 1;
	currKey = "project";
	currDictList.value = currCompany.childList || [];
	popupState.value = true;
};

const typeClick = () => {
	currPopupType.value = 1;
	currKey = "type";
	currDictList.value = selectList[currKey + "List"];
	popupState.value = true;
};

const pcbClick = () => {
	currPopupType.value = 1;
	currKey = "whether";
	currDictList.value = selectList[currKey + "List"];
	popupState.value = true;
};

const tpClick = (index: number) => {
	currPopupType.value = 1;
	currKey = "tp";
	currIndex = index;
	currDictList.value = selectList.whetherList;
	popupState.value = true;
};

const tagClick = (index: number) => {
	currPopupType.value = 1;
	currKey = "tag";
	currIndex = index;
	currDictList.value = selectList[currKey + "List"];
	popupState.value = true;
};

// const userConfirm = (codes: string[], options: OptionType[]) => {
// 	finalForm.value.projecterName = "";
// 	finalForm.value.projecterCode = "";
// 	console.log(codes, options);
// };

const timeClick = () => {
	currPopupType.value = 2;
	popupState.value = true;
};

const formSubmit = () => {
	formRef.value
		.validate()
		.then(() => {
			emits("form-submit");
		})
		.catch(() => {});
};
</script>

<template>
	<div class="pur-create">
		<van-cell-group inset>
			<div class="space"></div>
			<Form ref="formRef" :scroll-to-error="true" :validate-first="true">
				<BasicForm
					:form="form"
					@company-click="companyClick"
					@project-click="projectClick"
					@type-click="typeClick"
					@pcb-click="pcbClick"
				/>
				<MaterialForm :form="form" @tp-click="tpClick" @tag-click="tagClick" />
				<div class="space"></div>
				<ExtendForm :form="form" @time-click="timeClick" />
				<div class="space"></div>
				<Button type="primary" block round @click="formSubmit">提交</Button>
			</Form>
			<div class="pur-picker">
				<Popup v-model:show="popupState" position="bottom">
					<Picker
						v-if="currPopupType == 1"
						teleport="body"
						:columns="currDictList"
						@cancel="popupState = false"
						@confirm="pickerConfirm"
					/>
					<DatePicker
						v-if="currPopupType == 2"
						v-model="finalForm.customTime"
						:min-date="new Date()"
						@confirm="dateConfirm"
						@cancel="popupState = false"
					/>
				</Popup>
				<!-- <ChooseUser v-model="chooseUserState" @confirm="userConfirm" /> -->
			</div>
		</van-cell-group>
	</div>
</template>

<style lang="less" scoped>
.pur-create {
	.space {
		height: 10px;
	}
	:deep(.van-cell-group) {
		background-color: #f8f8f8;
	}
}
</style>
